<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      opacity: ;
    }
  </style>
</head>
<body>
  <input type="button" value="开始" id="btn">
  <div class="box" id="box"></div>
  <script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    // 点击按钮 , 调用函数
 
    btn.onclick = function(){
        animate(box,{left:500,width:300,height:200,opacity:1},2000);
    }
     // 定义函数
    function animate(ele,end,time){
    // 此时已知结束位置,和总时长   因此我们需要知道开始位置和时间间隔(可以自定义)
    // 得到开始位置
    var start = {};
    // 定义一个空的对象刚好与结束位置的对象内容匹配
    // 要给star的空对象赋值,此时空对象的属性名就是结束位置的属性名
    // 需要将每一个结束位置的属性名,赋值给开始位置,k 为end 里面的每一个属性名
    for (var k in end){
    // 需要给start的每一项属性名赋值,其值为页面显示的效果调用end的属性值
    start[k] = parseFloat(window.getComputedStyle(ele)[k]);
    }
    // 此时已知开始位置和结束位置,和总时长   因此我们需要知道时间间隔(可以自定义)
    // 自定义时间间隔
    var interval = 50;
    // 根据时间总时长和时间间隔计算一共走的次数maxcount
    var maxcount = time / interval ;
    // 计算每一个属性的步长 利用for循环 
    // 每一个属性都有步长因此可以将所有的步长放到一个空对象中
    var step = {};
    for(var k in end ){
        step[k] =(end[k]-start[k] ) / maxcount;
    }
    // console.log(step);

    
    // 定义累加器
    var count=0;
    var timer;
    // 开启定时器 后期需要清除定时器,需要将定时器存储到一个变量中
        timer = setInterval(function(){
            // 执行定时器让每个属性的步长加到开始位置的每个属性的步长,利用for循环
            for(var k in end ){
                start[k] += step[k];
            }
            count++;
            // 判断累加器是否大于maxconut;
            if(count>=maxcount){
                // 拉终停表,让现在的每一个属性等于最终位置的每一个属性,利用循环
                    for(var k in end){
                    start[k] = end[k];
                }
                    // 清除定时器       
                    clearInterval(timer);
                }
                // 赋值  给活动元素的一个属性赋当前的属性值(就是一个变化的过程,因为每次每个属性都加了一个步长)
            for (var k in start){
                // 因为单位问题就要判断属性值是否含有单位
                if(k === "opacity"){
                    ele.style[k] = start[k]; 
                }else{
                    ele.style[k] = start[k]+ "px";
                }  
            }
        },interval)
    }

  </script>
</body>
</html>